<!--
 * @Author: 宋杰
 * @Date: 2020-12-30 22:00:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-27 16:22:49
 * @Description: 一家十一口(猜一字) 分值标准
-->
<template>
  <div class="div1" v-loading="loading">
    <!-- 头部搜索框 -->
    <div class="div2">
      <div class="topBox3">
        <div class="topBox3_sou">
          <!-- 分值标准名称 -->
          <div class="topBox3_sou1">
            <span>分值标准名称: </span>
            <el-input v-model="findValue" placeholder=""></el-input>
          </div>
          <el-button type="primary" class="sousuoBox" @click="toFindThe">
            <i class="el-icon-search"></i>
            <span>查找</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- con -->
    <div class="div3">
      <div class="div3_xinzen">
        <el-button type="primary" size="small" @click="newModified(1)"
          ><i class="el-icon-circle-plus-outline"></i
          ><span>新增</span></el-button
        >
        <!-- 弹窗 分值标准详情 -->
        <el-dialog :visible.sync="centerDialogVisible2" center class="eldialog">
          <div class="eldialog_top">分值标准详情</div>
          <div class="eldialog_con eldialog_con1">
            <div>
              <span>专家评审分值：</span>
              <span v-show="showbtn == 2">{{ zjpfScore }}</span>
              <el-input
                v-show="showbtn == 1"
                v-model="zjpfScore2"
                placeholder="专家评审分值"
              ></el-input>
            </div>
            <div>
              <span>学员评审分值：</span>
              <span v-show="showbtn == 2">{{ xypgScore }}</span>
              <el-input
                v-show="showbtn == 1"
                v-model="xypgScore2"
                placeholder="学员评审分值"
              ></el-input>
            </div>
          </div>
          <div class="eldialog_con">
            <el-button plain type="primary" @click="newModified2()"
              >新 增 / 修 改</el-button
            >
          </div>
        </el-dialog>
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="standardId" label="序号"> </el-table-column>
        <el-table-column prop="standardName" label="分值标准名称">
        </el-table-column>
        <el-table-column prop="expertReviewScore" label="专家评审分值">
        </el-table-column>
        <el-table-column prop="studentEvaluationScore" label="学员评价分值">
        </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(1, scope.row)"
              type="text"
              size="small"
              >关闭</el-button
            >
            <el-button
              @click="handleClick(0, scope.row)"
              type="text"
              size="small"
              >启用</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="newModified(2, scope.row)"
              >操作</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- con end -->

    <!-- 分页 -->
    <div class="div4">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
        background
      >
      </el-pagination>
    </div>
    <!-- 分页end -->
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      loading: true, //加载
      // 搜索
      findValue: null,

      // 列表展示数据
      tableData: [],
      // 列表展示数据 end

      // 分页
      pageNum: 1, //初始为 1
      total: null, //共多少页
      // 分页end

      // 弹窗
      centerDialogVisible2: false, //弹窗
      showbtn: 1, //切换输入框
      itemDate: null, //接收数据
      valnum: 1,
      zjpfScore: "", //专家评分
      xypgScore: "", // 学员评分
      zjpfScore2: "100", //专家评分
      xypgScore2: "1" // 学员评分
      // 弹窗 end
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getBackgroundData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    // 获取后台数据
    getBackgroundData() {
      let data = {
        pageNum: this.pageNum, //页数
        pageSize: "10", //每页条数
        standardName: this.findValue //分值标准名称
      };
      console.log("data", data);
      // let resData = [];
      this.$fetch("business/standard/list", data)
        .then(res => {
          console.log("分值标准res", res);
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total = res.total;
            this.tableData.forEach(val => {
              // val["validTime"] = val.noticeStarttime + "--" + val.noticeEndtime;
              if (val.status == 0) {
                val["state"] = "开启";
              } else if (val.status == 1) {
                val["state"] = "关闭";
              }
            });
          }
          // this.tableData.splice(1, 0); //可以用来刷新数组解决数据改变页面不变的问题
          // console.log("this.tableData", this.tableData);
          this.loading = false;
        })
        .catch(err => {
          console.log("分值标准err", err);
          this.loading = false;
        });
    },

    // 查找
    toFindThe() {
      console.log("this.findValue", this.findValue);
      if (this.findValue == " ") {
        this.findValue = null;
      }
      this.getBackgroundData();
    },

    // 操作
    handleClick(val, row) {
      console.log("row", row);
      let valData = {
        standardId: row.standardId, //id
        status: val //状态
      };
      this.$put("business/standard", valData)
        .then(res => {
          console.log("分值标准操作res", res);
        })
        .catch(err => {
          console.log("分值标准操作err", err);
        });
      this.getBackgroundData();
    },

    // 弹窗 新建 修改
    newModified(val, row) {
      let val2 = val;
      this.centerDialogVisible2 = !this.centerDialogVisible2;
      if (val2 == 1) {
        this.showbtn = 1;
        this.valnum = 1;
      } else if (val2 == 2) {
        this.showbtn = 2;
        this.valnum = 2;
        console.log(row);
        this.zjpfScore = row.type;
        this.xypgScore = row.organization;
        this.itemDate = row;
      }
    },
    newModified2() {
      if (this.valnum == 1) {
        // 调用新增接口
      } else {
        this.showbtn = 1;
        // 调用修改接口
        this.itemDate.type = this.zjpfScore2;
        this.itemDate.organization = this.xypgScore2;
      }
    },
    // 弹窗 新建 修改 end

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      this.getBackgroundData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getBackgroundData();
    }
    // 分页 end
  }
};
</script>
<style scoped>
.div1 {
  /* border: 1px solid #000; */
  background: #f5f6fa;
}

/* 头部搜索 */
.div2 {
  margin-bottom: 20px;
}
.div2,
.div3 {
  /* border: 1px solid rgb(18, 141, 241); */
  background: #fff;
  /* border-radius: 8px; */
  padding: 10px;
}

.topBox3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
  height: 49px;
}
/* 头部搜索 */
.sousuoBox {
  margin-left: 10px;
  height: 30px !important;
  padding: 0;
  width: 60px;
}
.topBox3_sou {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.topBox3_sou >>> .el-input {
  width: 180px;
}
.topBox3_sou > :nth-child(1) {
  margin-right: 10px;
}
.topBox3_sou >>> .el-input__inner {
  height: 30px !important;
  line-height: 32px;
}

.topBox3_sou1 >>> .el-input__prefix {
  /* height: 30px !important; */
  display: flex;
  /* justify-content: flex-end; */
  width: 100%;
}
.topBox3_sou >>> .el-input__icon {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
}
.topBox3_sou1 >>> .el-input__icon.el-icon-date {
  /* height: 30px !important; */
  line-height: 32px;
  margin-right: 20px;
  margin: 0;
  position: absolute;
  top: 0;
  right: 5px;
}
.topBox3_sou1 >>> .el-input__suffix {
  right: 25px;
}
/* 头部搜索end */

/* 内容 */
.div3 >>> .el-table thead {
  color: rgb(75, 74, 74) !important;
}
.div3 >>> .cell {
  line-height: 22px;
}
/* 内容end */
/* 分页 */
.div4 {
  background: #fff;
  width: 100%;
}
.div4 > :nth-child(1) {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.div4 >>> .el-pagination__total {
  position: absolute;
  left: 5px;
}
/* 分页end */
/* 新增 */
.div3_xinzen {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
/* 弹窗 */
.eldialog >>> .el-dialog {
  position: relative;
  min-width: 500px;
  min-height: 300px;
  border-radius: 6px;
  padding: 10px;
}
.eldialog >>> .el-dialog__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid #eee;
}
.eldialog >>> .el-dialog__headerbtn {
  top: 15px;
}
.eldialog_top {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 30px;
  line-height: 30px;
}
.eldialog_con {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.eldialog_con1 {
  height: 200px;
}
</style>
